<!-- 这个是主页面 -->
 <!-- 要把这个布局改成div的模式 -->
<template>
  <div class="home" >
    <DrawMenu></DrawMenu>
<main>
      <section class="left">
        <SelectGraphic />
      </section>
      <section class="center" >
        <div
            class="content"
            @drop="handleDrop"
            @dragover="handleDragOver"
            @mousedown="handleMouseDown"
            @mouseup="deselectCurComponent"
            @dblclick="handleDblClick"
        >
          <Editor></Editor>
        </div>
<!--        <draw-canvas></draw-canvas>-->

      </section>
      <section  class="right">
        <el-tabs v-if="curComponent" v-model="activeName">
          <el-tab-pane label="属性" name="attr">
            <component :is="curComponent.component + 'Attr'" />
          </el-tab-pane>
         <el-tab-pane label="HG000" name="hg3000" style="padding-top: 20px;">
           <Hg3000Link />
         </el-tab-pane>

<!--          <el-tab-pane label="动画" name="animation" style="padding-top: 20px;">-->
<!--            <AnimationList />-->
<!--          </el-tab-pane>-->
<!--          <el-tab-pane label="事件" name="events" style="padding-top: 20px;">-->
<!--            <EventList />-->
<!--          </el-tab-pane>-->
        </el-tabs>
        <CanvasAttr v-else></CanvasAttr>
      </section>
    </main>
  </div>
</template>

<script>
// @ is an alias to /src

import DrawMenu from "@/draw/DrawMenu";
import ComponentList from "@/components/ComponentList";
import Editor from "@/components/Editor/DrawCanvas"
import CanvasAttr from '@/components/CanvasAttr'
import {mapState} from "vuex";
import {listenGlobalKeyDown} from "@/utils/shortcutKey";
import {setDefaultcomponentData} from "@/store/snapshot";
import {deepCopy} from "@/utils/utils";
import componentList from "@/custom-component/component-list";
import generateID from "@/utils/generateID";
import {changeComponentSizeWithScale} from "@/utils/changeComponentsSizeWithScale";
import Hg3000Link from "@/custom-component/common/Hg3000Link.vue"
import SelectGraphic from "@/run/SelectGraphic.vue";

export default {
  name: 'DrawHomeView',
  components: {
    DrawMenu, Editor, CanvasAttr, Hg3000Link,   SelectGraphic
  },
  data() {
    return {
      activeName: 'attr',
      reSelectAnimateIndex: undefined,
    }
  },
  computed: mapState([
    'componentData',
    'curComponent',
    'isClickComponent',
    'canvasStyleData',
    'editor',
    'iSelectShapeIndex',
  ]),

  created() {
    this.restore()
    // 全局监听按键事件
    listenGlobalKeyDown()
  },

  methods: {
    restore() {
      // 用保存的数据恢复画布
      if (localStorage.getItem('canvasData')) {
        setDefaultcomponentData(JSON.parse(localStorage.getItem('canvasData')))
        this.$store.commit('setComponentData', JSON.parse(localStorage.getItem('canvasData')))
      }

      if (localStorage.getItem('canvasStyle')) {
        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
      }
    },

    createShape( e ) {
      console.log("create shape ")
      // e.preventDefault()
      e.stopPropagation()
      if( this.iSelectShapeIndex < 0 )
        return

      const rectInfo = this.editor.getBoundingClientRect()
      
        const component = deepCopy(componentList[this.iSelectShapeIndex])
        // console.log( "component", component )
        component.style.top = e.clientY - rectInfo.y
        //格式化这个top值
        component.style.top = Number( component.style.top.toFixed(0) )

        //格式化这个left值
        component.style.left = e.clientX - rectInfo.x
        component.style.left = Number( component.style.left.toFixed(0) )

        // console.log('pos', component.style.left, component.style.top)

        component.id = generateID()

        // 根据画面比例修改组件样式比例 https://github.com/woai3c/visual-drag-demo/issues/91
        changeComponentSizeWithScale(component)

        this.$store.commit('addComponent', { component })
        this.$store.commit('recordSnapshot')

    },

    handleDrop(e) {
      console.log("drop")
      e.preventDefault()
      // e.stopPropagation()

      const index = e.dataTransfer.getData('index')
      console.log( "drop index:  ", index )
      const rectInfo = this.editor.getBoundingClientRect()
      if (index) {
        const component = deepCopy(componentList[index])
        // console.log( "component", component )
        component.style.top = e.clientY - rectInfo.y
        //格式化这个top值
        component.style.top = Number( component.style.top.toFixed(0) )

        //格式化这个left值
        component.style.left = e.clientX - rectInfo.x
        component.style.left = Number( component.style.left.toFixed(0) )

        // console.log('pos', component.style.left, component.style.top)

        component.id = generateID()

        // 根据画面比例修改组件样式比例 https://github.com/woai3c/visual-drag-demo/issues/91
        changeComponentSizeWithScale(component)

        this.$store.commit('addComponent', { component })
        this.$store.commit('recordSnapshot')
      }
      console.log('drop')
    },

    handleDragOver(e) {
      console.log('over')
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },

    //画布点中的处理工作  在选择状态下处理
    handleMouseDown(e) {
      if (e.button == 2 ) {   //右键在这里不执行功能，这里只处理左键的点击
        return 
      }
      //不建立图形对象
      if( this.iSelectShapeIndex < 0 ){    
        e.stopPropagation()
        this.$store.commit('setClickComponentStatus', false)
        this.$store.commit('setInEditorStatus', true)
        console.log('mousedown')
      }
      else{  //建立图形对象
          this.createShape( e )
      }

    },

    //双击后使用选择功能
    handleDblClick(  ){
      //this.$store.commit( "setSelectShapeIndex", -1 )
    },

    deselectCurComponent(e) {
      if (!this.isClickComponent) {
        this.$store.commit('setCurComponent', { component: null, index: null })
      }

      // 0 左击 1 滚轮 2 右击
      if (e.button != 2) {
        this.$store.commit('hideContextMenu')
      }
    },

  },
}
</script>

<style  lang="scss">
.home {
    height: 100vh;
    background: #fff;
    main {
      height: calc(100% - 3vh);
      position: relative;

      .left {
        // position: absolute;
        // width: 100px;
        left: 0;
        top: 0;

        // & > div {
        //   overflow: auto;

        //   &:first-child {
        //     border-bottom: 1px solid #f2f0ee;
        //   }
        // }
      }

      .right {
        position: absolute;
        height: 100%;
        width: 288px;
        right: 0;
        top: 0;
        .el-select {
          width: 100%;
        }
      }

      .center {
        margin-left: 200px;
        margin-right: 288px;
        background: #f5f5f5;
        height: calc(100% - 1vh);
        overflow: auto;
        padding: 0px;

        .content {
          width: 100%;
          height: 100%;
          overflow: auto;
        }
      }

    }
}
</style>

